<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>导航菜单</title>
  <script>
    window.onload =function() {
      //找到所有dl标签
      let dls = document.querySelectorAll("li.nav_li dl");
      //遍历所有的dl标签，加事件
      for(let i=0;i<dls.length;i++) {
        let dl = dls[i];
        //鼠标移动上来设置所有的dd显示
        dl.onmouseenter = function() {
          //找所有的dd
          let dds = dl.querySelectorAll("dd");
          //遍历所有的dd标签设置display为block
          for(let j=0;j<dds.length;j++) {
            let dd = dds[j];
            dd.style.display = 'block';
          }
        }
        //鼠标移走设置所有的dd消失
        dl.onmouseleave = function() {
          let dds = dl.querySelectorAll("dd");
          for(let j=0;j<dds.length;j++) {
            let dd = dds[j];
            dd.style.display = 'none';
          }
        }
      }
    }
  </script>
  <style>
    *{
      margin: 0px;
      padding: 0px;
      font-size:14px;
    }
    *.clear {
      clear: both;
    }
    #nav li {
      list-style: none;
    }
    #nav {
      width: 1200px;
      margin: auto;
      margin-top:30px;
    }
    li.nav_li {
      float:left;
    }
    li.nav_li dt {
      width: 110px;
      height: 45px;
      border-right:1px solid #fff;
      background: #833;
      color: #fff;
      cursor: pointer;
    }
    li.nav_li dt span {
      position: relative;
      top:15px;
      left:25px;
    }
    li.nav_li dd {
      width: 110px;
      height: 40px;
      background: #393;
      color:#fff;
      border-bottom: 1px solid #fff;
      cursor: pointer;
      display: none;
    }
    li.nav_li dd span {
      position: relative;
      top:10px;
      left: 25px;
    }
    li.nav_li dd:hover {
      background: #339;
    }
  </style>
</head>
<body>
  <ul id="nav">
    <li class="nav_li">
      <dl>
        <dt><span>首页信息</span></dt>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>教学机构</span></dt>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>就业信息</span></dt>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>人才招聘</span></dt>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>教学资源</span></dt>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>数据中心</span></dt>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>校园一角</span></dt>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>校园新闻</span></dt>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>班级信息</span></dt>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
      </dl>
    </li>
    <li class="nav_li">
      <dl>
        <dt><span>通知公告</span></dt>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
        <dd><span>导航链接</span></dd>
      </dl>
    </li>
    <li class="clear"></li>
  </ul>
</body>
</html>